<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单查询</title>
</head>
<body>
<div class="container">

    <div class="search-box">
        <div class="top-button">
            <button id="token_button">Token</button>
        </div>
        <h1>订单查询</h1>
        <div class="box">
            <input type="text" id="queryInput" placeholder="请输入订单编号或手机号">
        </div>
        <div class="box">
            <button id="search_button">查询</button>
        </div>


        <textarea id="orderInfo" class="orderInfo" style="display:none;"></textarea>
    </div>
</div>


<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: inline-block;

    }

    .box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 1px;
        justify-content: center;
    }

    .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .top-button {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: end;
    }

    #token_button {
        width: 100px;
        height: 45px;
        background-color: #1795bb;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 8px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
    }

    #token_button:active {
        background-color: #1795bb;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    #search_button {
        width: 100%;
        height: 45px;
        background-color: #1795bb;
        margin-bottom: 16px;
        padding: 4px 16px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
    }

    .search-box {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        max-width: 800px;
    }


    #queryInput {
        width: 100%;
        height: 35px;
        margin-bottom: 16px;
        padding: 4px 16px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
    }

    #queryInput:focus {
        outline: none;
        border-color: #1795bb;
    }

    #queryInput::placeholder {
        color: #ccc;
    }


    .orderInfo {
        width: 100%;
        height: 450px;
    }

</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">

<script>

    const queryInput = document.getElementById('queryInput');
    const searchButton = document.getElementById('search_button');
    const orderInfo = document.getElementById('orderInfo');
    const tokenButton = document.getElementById('token_button');

    // script.js
    function queryOrder() {
        const input = queryInput.value;
        const orderInfo = document.getElementById('orderInfo');
        // 从本地存储中获取Token
        const token = localStorage.getItem('search_token');
        // 如果Token不存在，则弹出提示框并返回
        if (!token) {
            alert('请先获取Token');
            return;
        }
        const options = {method: 'GET', headers: {search_token: token}};
        fetch(`http://localhost:8080/admin/order/search/${input}`, options)
            .then(response => response.json())
            .then(response => {
                if (response.code === 200 && response.data) {
                    const data = JSON.stringify(response.data);
                    orderInfo.value = objectToString(data);
                    orderInfo.style.display = 'block'; // 显示订单信息
                }else if(response.code==="403"){
                    toastr.error("Token已过期，请重新获取Token！")
                    return
                }
                else {
                    console.log(response)
                    toastr.success('未找到相关订单信息')

                }
            })
            .catch(err => {
                console.error('查询失败', err);
                alert('查询失败，请检查网络连接或输入是否正确');
            });
    }


    // 输入框回车键监听
    queryInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault(); // 阻止默认的换行操作
            searchButton.click();
        }
    });
    // 查询事件
    searchButton.addEventListener('click', async function () {
        const input = queryInput.value;
        // 如果输入为空，则不执行查询操作
        if (input === '') {
            toastr.success("查询不能为空！")

            return;
        } else {
            queryOrder()
        }
    });

    // Token按钮点击事件
    tokenButton.addEventListener('click', function () {
        //     弹出输入框
        const token = prompt('请输入Token：');

        //     保存Token 到本地
        localStorage.setItem('search_token', token);
    });

    orderInfo.addEventListener('click', async function () {
        navigator.clipboard.writeText(orderInfo.value).then(() => {
            // alert('内容已复制到剪贴板！');
            toastr.success("复制成功！")
        }).catch(err => {
            console.error('无法复制到剪贴板', err);
        });
    })

    function objectToString(jsonString) {

        // 解析JSON字符串
        const obj = JSON.parse(jsonString);

        let template = `
            商品规格: ${obj.name}\n\n订单号: ${obj.productNo}\n\n`;

        if (obj.product !== null) {
            template += `商品单价: ${obj.product.productPrice}\n\n商品留言:${obj.product.productInfo}\n\n`;
        }

        if (obj.operatorRecord !== null) {
            template += `派单状态: ${obj.operatorStatus}\n\n接单师傅: ${obj.operatorRecord.operatorName}\n\n派单客服:${obj.operatorRecord.receiveName}\n\n派单时间:${obj.operatorRecord.operatorTime}\n\n完成状态:${obj.operatorRecord.status}\n\n`;
        } else {
            template += `派单状态: ${obj.operatorStatus}\n\n`;
        }

        if (obj.refundRecord !== null) {
            template += `退款状态: ${obj.refundStatus}\n\n`;
            template += `退款渠道: ${obj.refundRecord.paymentSource}\n\n退款原因:${obj.refundRecord.description}\n\n退款金额:${obj.refundRecord.refundPrice}\n\n退款时间:${obj.refundRecord.refundTime}`;
        }else {
            template += `退款状态: ${obj.refundStatus}\n\n`;
        }


        return template.trim();
    }

</script>
</body>
</html>